<template>
  <div>
    <Form layout="vertical" :model="data" ref="basicSetting">
      <Card title="基本设置" class="w-1/2 !m-10px min-w-700px">
        <FormItem :name="['jsonValue', 'baseUrl']" label="基本URl" :required="true">
          <Input
            v-model:value="data.jsonValue.baseUrl"
            placeholder="基本URl"
            @change="generalChange"
          />
        </FormItem>
        <FormItem :name="['jsonValue', 'prohibitDifferentUrl']" label="">
          <div class="flex space-center">
            <Switch v-model:checked="data.jsonValue.prohibitDifferentUrl" @change="generalChange" />
            <span class="ml-12px">禁止从客户端请求使用主机名</span>
          </div>
        </FormItem>
        <div class="float-right">
          <Button @click="resetBasicSetting" :disabled="!isGeneralEdit">撤销</Button>
          <Button
            type="primary"
            class="ml-12px"
            @click="submitBasicSetting"
            :disabled="!isGeneralEdit"
            >保存</Button
          >
        </div>
      </Card>
    </Form>
    <Card title="设备连接" class="w-1/2 !m-10px min-w-700px">
      <Tabs :centered="true">
        <TabPane tab="HTTP(S)" key="HTTP" :forceRender="true">
          <BasicForm @register="registerHttp">
            <template #http="{ model, field }">
              <Switch v-model:checked="model[field]" />
              <span class="ml-12px">HTTP</span>
            </template>
            <template #https="{ model, field }">
              <Switch v-model:checked="model[field]" />
              <span class="ml-12px">HTTPs</span>
            </template>
          </BasicForm>
        </TabPane>
        <TabPane tab="MQTT(S)" key="MQTT" :forceRender="true">
          <BasicForm @register="registerMqtt">
            <template #mqtt="{ model, field }">
              <Switch v-model:checked="model[field]" />
              <span class="ml-12px">MQTT</span>
            </template>
            <template #mqtts="{ model, field }">
              <Switch v-model:checked="model[field]" />
              <span class="ml-12px">MQTTs</span>
            </template>
          </BasicForm>
        </TabPane>
        <TabPane tab="COAP(S)" key="COAP" :forceRender="true">
          <BasicForm @register="registerCoap">
            <template #coap="{ model, field }">
              <Switch v-model:checked="model[field]" />
              <span class="ml-12px">COAP</span>
            </template>
            <template #coaps="{ model, field }">
              <Switch v-model:checked="model[field]" />
              <span class="ml-12px">COAPs</span>
            </template>
          </BasicForm>
        </TabPane>
      </Tabs>
      <div class="float-right">
        <Button @click="resetDeviceConnectivity" :disabled="!isConnectEdit">撤销</Button>
        <Button
          type="primary"
          class="ml-12px"
          @click="submitDeviceConnectivity"
          :disabled="!isConnectEdit"
          >保存</Button
        >
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
  import { Card, Switch, Form, FormItem, Input, Tabs, TabPane, Button } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';
  import { httpForm, mpttForm, coapForm, isConnectEdit } from './basicSetting.data';
  import { BasicForm, useForm } from '/@/components/Form';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  import {
    getBasicSetting,
    postBasicSetting,
    getConnectSetting,
  } from '/@/api/thingsborad/settings/BasicSetting/basicSetting';
  import _ from 'lodash';
  let data = ref<Recordable>({
    jsonValue: {
      baseUrl: null,
      prohibitDifferentUrl: false,
    },
  });
  let basicSetting = ref<any>({});
  //保存修改前的基本设置
  let resGeneral = ref<Recordable>({});
  //保存修改前的设备连接设置
  let resConnect = ref<Recordable>({});
  let isGeneralEdit = ref<boolean>(false);

  onMounted(async () => {
    try {
      resGeneral.value = await getBasicSetting();
      resConnect.value = await getConnectSetting();
    } catch (e) {
      console.error('获取配置信息失败', e);
    }
    data.value = Object.assign(data.value, _.cloneDeep(resGeneral.value));
    await setHttpFieldsValue(resConnect.value.jsonValue);
    await setMqttFieldsValue(resConnect.value.jsonValue);
    await setCoapFieldsValue(resConnect.value.jsonValue);
  });
  const [
    registerHttp,
    {
      setFieldsValue: setHttpFieldsValue,
      validate: httpvalidate,
      getFieldsValue: getHttpFieldsValue,
    },
  ] = useForm({
    layout: 'vertical',
    schemas: httpForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [
    registerMqtt,
    {
      setFieldsValue: setMqttFieldsValue,
      validate: mqttvalidate,
      getFieldsValue: getMqttFieldsValue,
    },
  ] = useForm({
    layout: 'vertical',
    schemas: mpttForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [
    registerCoap,
    {
      setFieldsValue: setCoapFieldsValue,
      validate: coapvalidate,
      getFieldsValue: getCoapFieldsValue,
    },
  ] = useForm({
    layout: 'vertical',
    schemas: coapForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  // 基本设置撤销
  async function resetBasicSetting() {
    data.value.jsonValue.baseUrl = resGeneral.value.jsonValue.baseUrl;
    data.value.jsonValue.prohibitDifferentUrl = resGeneral.value.jsonValue.prohibitDifferentUrl;
    isGeneralEdit.value = false;
  }
  // 设备连接撤销
  async function resetDeviceConnectivity() {
    await setHttpFieldsValue(resConnect.value.jsonValue);
    await setMqttFieldsValue(resConnect.value.jsonValue);
    await setCoapFieldsValue(resConnect.value.jsonValue);
    isConnectEdit.value = false;
  }
  //基本设置保存
  async function submitBasicSetting() {
    try {
      await basicSetting.value.validate();
      await postBasicSetting(data.value);
      isGeneralEdit.value = false;
    } catch (e) {}
  }
  // 设备连接保存
  async function submitDeviceConnectivity() {
    try {
      await httpvalidate();
      await mqttvalidate();
      await coapvalidate();
      let http = getHttpFieldsValue();
      let mqtt = getMqttFieldsValue();
      let coap = getCoapFieldsValue();
      Object.assign(resConnect.value.jsonValue, http, mqtt, coap);
      await postBasicSetting(resConnect.value);
      isConnectEdit.value = false;
    } catch (e) {
      console.error(e);
    }
  }

  function generalChange() {
    isGeneralEdit.value = true;
  }
</script>
